<template>
    <div class="p-8">
        <el-breadcrumb class="breadcrumb-box">
            <el-breadcrumb-item>
                <router-link to="/">首页</router-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>前端工具集</el-breadcrumb-item>
        </el-breadcrumb>

        <el-tabs v-model="activeTab">
            <el-tab-pane label="接口转换" name="1">
                <div class="flex">
                    <el-input
                        type="textarea"
                        rows="8"
                        placeholder="输入:&#10;route: 'route0008',&#10;controller: 'lepay',&#10;action: 'getUserInfoApp',"
                        v-model="inputValue"
                        clearable
                    ></el-input>

                    <div class="m-20 flex-col">
                        <el-button class="m-20" type="primary" @click="changeRouteToUrl"
                            >转换 &gt;</el-button
                        >
                        <el-button class="m-20" type="primary" @click="copyOutputValue"
                            >复制输出内容 &gt;</el-button
                        >
                    </div>

                    <el-input
                        type="textarea"
                        rows="8"
                        placeholder="输出:&#10;/route0008/lepay/getUserInfoApp.json"
                        v-model="outputValue"
                        disabled
                    ></el-input>
                </div>
            </el-tab-pane>
            <el-tab-pane label="格式转换" name="2"> Content of Tab Pane 2 </el-tab-pane>
            <el-tab-pane label="常见颜色" name="3"> Content of Tab Pane 3 </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const activeTab = ref('1');
const inputValue = ref('');
const outputValue = ref('');

const changeRouteToUrl = () => {
    outputValue.value = routeToUrl(inputValue.value);
};

const copyOutputValue = () => {
    try {
        navigator.clipboard.writeText(outputValue.value);
        ElMessage.success('复制成功');
    } catch (error) {
        console.error('复制失败', error);
        ElMessage.error('复制失败');
    }
};

const routeToUrl = (route: string) => {
    return route
        .replace(/(\s|route:|controller:|action:)/g, '')
        .replace(/(','|',|')/g, '/')
        .replace(/(\/$)/g, '.json');
};
</script>

<style scoped>
.flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.m-20 {
    margin: 20px;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.breadcrumb-box {
    margin-bottom: 20px;
}
</style>
